import React, {PureComponent, ReactNode,Fragment} from 'react';
import {Breadcrumb} from "antd";
import  router, {IRouter, AuthButNoMenu } from "../../router";
import { matchPath ,withRouter, RouteComponentProps } from 'react-router-dom'

interface IProps extends RouteComponentProps{

}

interface IState {
    mergeRouter:IRouter[]
}

class index  extends PureComponent<IProps,IState> {

    constructor(props:IProps) {
        super(props);
        this.state = {
            mergeRouter: []
        }
    }
    generate = (routerList: IRouter[]): ReactNode => {
        const path = this.props.location.pathname;
        return (
            <Fragment>
                {
                    routerList?.map(r => {
                        const  match = matchPath(path,{path: r.path});
                        if(match !== null ) {
                            return (
                                <Fragment key={ r.key}>
                                    <Breadcrumb.Item>{r.title}</Breadcrumb.Item>
                                    { r.children? this.generate(r.children): null}
                                </Fragment>
                            )
                        }
                        return null;
                    })
                }
            </Fragment>
        )
    }
    // 将路由数组放到 state中，页面直渲染一次,不会影响页面性能
    componentDidMount(): void {
        this.setState({
            mergeRouter: [...router,...AuthButNoMenu]
        })
    }

    public render() {
        // 合并router数组
        return (
            <div>
                <Breadcrumb style={{ marginLeft:'16px', marginTop:"10px" }}>
                    { this.generate(this.state.mergeRouter) }
                </Breadcrumb>
            </div>
        );
    }
}

export default withRouter(index);
